// 新增簿记页面
import React from 'react';
import { connect } from 'dva';
import { FirstHeaderC, NoDataMaskC } from '../../../../comps';
import { Row, Col, Spin, message } from 'antd';
import mystyle from './index.less';
import accounting from 'accounting';
import marketDict from '../../../../comps/business/tradingMarket/config';
import { getProductName } from '../../../../utils/utils';
class HKinfoC extends React.Component {
  state = {
    masking: true, //是否显示蒙版
    info: {}, //港股信息
  };

  componentDidMount() {
    this.getInfo(this.props);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { tradingcode, exchangecode } = this.props;
    if (tradingcode != nextProps.tradingcode || exchangecode != nextProps.exchangecode) {
      if (nextProps.tradingcode && nextProps.exchangecode) {
        this.setState(
          {
            info: {},
          },
          () => {
            this.getInfo(nextProps);
          },
        );
      } else {
        this.setState({
          info: {},
        });
      }
    }
  }

  //获取数据
  getInfo = (obj) => {
    const { dispatch } = this.props;
    const { tradingcode, exchangecode } = obj;
    console.log(tradingcode);
    if (!tradingcode) return;
    dispatch({
      type: 'HKstockM/queryHKInfo',
      payload: {
        tradingCode: tradingcode,
        exchangeCode: exchangecode,
      },
      callback: (data) => {
        if (data) {
          this.setState(
            {
              info: data,
            },
            () => {
              this.props.onChange(this.state.info);
            },
          );
        } else {
          this.setState(
            {
              info: {},
            },
            () => {
              this.props.onChange(this.state.info);
            },
          );
        }
      },
    });
  };

  //格式化数据
  formatData = (value, unit, number) => {
    if (value == undefined || value == null) {
      return '--';
    } else {
      if (unit == '%') {
        //原值*100了
        return parseFloat(value * 100).toFixed(2) + unit;
      } else {
        return accounting.formatNumber(value, number) + unit;
      }
    }
  };
  render() {
    const { loading } = this.props;
    const { info, masking } = this.state;
    return (
      <div>
        <FirstHeaderC title={'港股信息'} />
        <Spin spinning={loading.effects['HKstockM/queryHKInfo'] == true}>
          <div className={mystyle.wrapper}>
            <div className={mystyle.content}>
              <div style={{ marginBottom: '12px' }} title={info.title} className={`${mystyle.hidden} ${mystyle.title}`}>
                {info.title || '--'}
              </div>
              <div className={info.busStatus == '停牌' ? mystyle.status1 : mystyle.status2}>{info.busStatus || '--'}</div>
              <div style={{ marginBottom: '12px' }} title={info.mainInfo || '--'} className={mystyle.hidden}>
                {info.mainInfo || '--'}
              </div>
              <div style={{ marginBottom: '16px' }}>{getProductName(info.exchangeCode, marketDict) || '--'}</div>
              <div className={mystyle.itemRow}>
                <div>最新价</div>
                <div title={this.formatData(info.lastPx, 'HKD', 6)}>{this.formatData(info.lastPx, 'HKD', 6)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>最高价</div>
                <div title={this.formatData(info.highPx, 'HKD', 6)}>{this.formatData(info.highPx, 'HKD', 6)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>最低价</div>
                <div title={this.formatData(info.lowPx, 'HKD', 6)}>{this.formatData(info.lowPx, 'HKD', 6)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>涨跌价格</div>
                <div title={this.formatData(info.upDownPx, 'HKD', 6)}>{this.formatData(info.upDownPx, 'HKD', 6)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>涨跌幅</div>
                <div title={this.formatData(info.upDownRate, '%', 2)}>{this.formatData(info.upDownRate, '%', 2)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>成交总量</div>
                <div title={this.formatData(info.totalVolumeTrade, '股', 0)}>{this.formatData(info.totalVolumeTrade, '股', 0)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>成交金额</div>
                <div title={this.formatData(info.totalValueTrade, 'HKD', 4)}>{this.formatData(info.totalValueTrade, 'HKD', 4)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>最小交易单位</div>
                <div title={this.formatData(info.lotSize, '股', 0)}>{this.formatData(info.lotSize, '股', 0)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>最小报价单位</div>
                <div title={this.formatData(info.optionTickSize, 'HKD', 4)}>{this.formatData(info.optionTickSize, 'HKD', 4)}</div>
              </div>
              <div className={`${mystyle.itemRow} ${mystyle.lineRow}`}>
                <div>参考汇率买入价</div>
                <div title={info.bidPx !== null && info.bidPx !== undefined ? info.bidPx + 'CNY' : '--'}>
                  {info.bidPx !== null && info.bidPx !== undefined ? info.bidPx + 'CNY' : '--'}
                </div>
              </div>
              <div className={mystyle.itemRow}>
                <div>参考汇率卖出价</div>
                <div title={info.askPx !== null && info.askPx !== undefined ? info.askPx + 'CNY' : '--'}>
                  {info.askPx !== null && info.askPx !== undefined ? info.askPx + 'CNY' : '--'}
                </div>
              </div>
              <div className={mystyle.itemRow}>
                <div>中间汇率</div>
                <div title={info.midPx != null && info.midPx != undefined ? info.midPx : '--'}>{info.midPx != null && info.midPx != undefined ? info.midPx : '--'}</div>
              </div>
            </div>
            {!Object.keys(info).length ? <NoDataMaskC height={'651px'} title={'请选择证券代码，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ HKstockM, loading }) => ({ HKstockM, loading }))(HKinfoC);
